<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>作业4实现登录窗口的动画效果</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>\
		<!-- 209001047-何豪 -->
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
			}

			div {
				box-sizing: border-box;
			}

			.layout {
				display: flex;
			}

			.slider {
				width: 375px;
			}

			.img {
				width: 375px;
				background-image: url(https://cdn.web-global.fds.api.QAAAmi-img.com/mcfe--mi-account/static/static/media/banner.92c693b4..jpg);
				background-size: cover;
				background-position: 50%;
				height: 100%;
			}

			.header {
				padding: 20px;
			}

			.iconsvg {
				display: inline-block;
				background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.-g6B_-VJVuXnSZQ4FjwqdwHaHX?pid=ImgDet&rs=1);
				width: 40px;
				height: 40px;
				background-size: cover;
			}

			.iconText {
				display: inline-block;
				font-size: 26px;
				font-weight: bold;
				width: 130px;
				height: 43px;
				line-height: 43px;
				text-align: center;
				vertical-align: top;
			}

			.aItem {
				color: #838383;
				display: inline-block;
				font-size: 14px;
				font-weight: 400;
				line-height: 40px;
				margin-left: 10px;
				margin-right: 10px;
				height: 40px;
			}

			.container .header {
				display: flex;
				width: 1150px;
				justify-content: space-between;
			}

			select {
				border: none;
			}

			.form {
				padding-top: 20px;
				width: 1150px;
			}

			.form .card {
				width: 450px;
				/* height: 567px; */
				margin: 0 auto;
				border-radius: 4px;
				box-shadow: 0 20px 50px 0 hsla(0, 0%, 64%, .1);
				padding: 40px 45px;
				overflow: hidden;
			}

			.form .card .content {
				width: 360px;
			}

			.tabList .loginText {
				font-size: 26px;
				color: #333;
				font-weight: 500;
				cursor: pointer;
			}

			.tabList .register {
				font-size: 26px;
				color: #838383;
				font-weight: 500;
				margin-left: 20px;
				cursor: pointer;
			}

			.tabList .line {
				width: 44px;
				height: 4px;
				border-radius: 2px;
				background-color: #ff5c00;
				transition: all .3s cubic-bezier(.645, .045, .355, 1);
			}

			.loginInput {
				margin-top: 20px;
			}

			.input {
				border: none;
				width: 366px;
				height: 61.6px;
				margin-left: -5px;
				margin-right: -5px;
				row-gap: 0px;
				background-color: #f9f9f9;
				font-size: 17px;
				text-indent: 50px;
				margin-top: 20px;
			}

			.loginInput .agree {
				margin-top: 20px;
				zoom: 150%;
				vertical-align: text-bottom;
				background-color: #f9f9f9;
			}

			.loginInput .agreetext {
				display: inline-block;
				margin-left: 5px;
			}

			.loginButton {
				color: #f9f9f9;
				opacity: 0. 4;
				margin-top: 20px;
				width: 100%;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				padding: 0 20px;
				text-align: center;
				background-color: #ff5c00;
				display: inline-block;
				font-size: 18px;
				font-weight: 400;
				height: 60px;
				line-height: 60px;
				overflow: hidden;
				position: relative;
				text-overflow: ellipsis;
				transition: all .3s cubic-bezier(.645, .045, .355, 1);
				vertical-align: top;
				white-space: nowrap;
			}

			.loginInput .forget {
				display: flex;
				color: #ff5c00;
				justify-content: space-between;
				margin-top: 20px;
			}

			.other .OtherWays {
				text-align: center;
				color: #838383;
				margin-top: 20px;
			}

			.otherIcon {
				border-radius: 23px;
				cursor: pointer;
				margin: 0 auto;
				display: block;
				font-size: 46px;
				height: 46px;
				overflow: hidden;
				width: 46px;
			}

			.allotherIcon {
				display: flex;
				margin-top: 20px;
			}

			.Alipay {
				background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.c1a6b94ad66a97a88d1b691a01033029?rik=bbt08tjxc7nmgw&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f03%2f78%2ff6L7nVffr3.jpg&ehk=%2fc0f0h5q0GbzL0VImVV1iiHgT7DIrcYG2qOa3rP%2b5Ws%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.wechat {
				background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.b4ae3496473df0a158d5b4927d3b74c1?rik=xVW%2fOYSozCCcrQ&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2020%2f03%2funnamed-file.png&ehk=N5w8ATecXx%2b1KWZ3xQORVtoIQU0Ijxz8%2bo6viRr14%2fE%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.qq {
				background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.bb97706c05e4a10920865d748f1b5c8c?rik=7v6NCBtsq5VtrQ&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fwater%2f13451%2fgoods_water_13451_698_698_.png&ehk=Cz9nz7EpaPr9UAuXr0W9KN9EloqQ6ekPxhqAojv4O6E%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.microblog {
				background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.3bab951af42ef9e46e57c3e52634a07a?rik=fI%2ba%2fUXb9QnKyg&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f0104e9571c743432f875a399db949b.jpg%401280w_1l_2o_100sh.jpg&ehk=xeHg4gWw2KrvPfe8yldA7rIuBVVgmUwKVk%2fJUWw4Bms%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.apple {
				background: url(https://ts1.cn.mm.bing.net/th/id/R-C.dd71bb36caa57d3f044489d92a37349f?rik=F0O4xXomi2CHCw&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2018%2f10-20%2f49967%2fwater_49967_698_857.4_.png&ehk=QelebY%2brtWjivs%2blC5KkT1IEcJYf9fOHoZv0ymzT0CE%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.copyRight {
				margin-top: 50px;
				text-align: center;
				color: #999;
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.Fail {
				color: #ff5c00;
				margin-top: 20px;
			}

			.VerificationCode {
				width: 252px;
			}

			.Sendverificationcode {
				margin-top: 20px;
				display: block;
				width: 112px;
				line-height: 61.6px;
				background-color: #f9f9f9;
			}

			.Sendverificationcode:hover {
				cursor: pointer;
			}

			@keyframes jump-out {
				from {
					transform: scale(0.7);
				}

				to {
					transform: scale(1);
				}
			}

			.jump-out-enter-active {
				animation: jump-out reverse 2s;
			}

			.jump-out-enter-active {
				animation: jump-out 2s;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<transition name="jump-out" appear>
				<div class="layout ">
					<div class="container">
						<div class="form">
							<div class="card">
								<div class="content">
									<div class="tabList">
										<div>
											<span class="loginText" @click="login"
												:style="{color:(islogin?'':'#838383')}">登录</span>
											<span class="register" @click="register"
												:style="{color:(islogin?'':'black')}">注册</span>
											<div class="line" :style="{marginLeft:(islogin?'':'80px')}">
											</div>
										</div>
									</div>
									<div class="loginInput" v-if="islogin">
										<form action="">
											<input type="text" class="input" placeholder="邮箱/手机号码/小米ID"
												v-model="account" required><br />
											<span style="color:#ff5c00 ;" v-if="Idinput">手机的格式错误</span>
											<input type="password" class="input password" placeholder="密码"
												v-model="password" required>
											<input type="checkbox" class="agree"><span class="agreetext">我已阅读并同意小米帐号 <a
													href="">用户协议</a> 和<a href="">
													隐私政策</a></span>
										</form>
										<button class="loginButton" @click="goLogin">登录</button>
										<div class="forget">
											<span>忘记密码</span>
											<span>手机号登录</span>
										</div>
									</div>
									<div class="loginInput" v-if="!islogin">
										<form action="">
											<select name="" id="" class="input" v-model="area">
												<option :value="item.value" v-for="item in countries">{{item.name}}
												</option>
											</select>
											<input type="text" class="input password" placeholder="手机号" required
												v-model="phone" @blur="blur" ref="phoneRef">
											<span style="color:#ff5c00 ;" v-if="Verifiedbymobilephone">手机格式错误</span>
											<div style="display: flex;"> <input type="text" required
													class="input password VerificationCode" placeholder="请输入验证码"
													v-model="VerificationCode">
												<button style="border: none;" ref="btn" class="Sendverificationcode"
													@click.prevent="sendCode">
													{{this.time<=0?this.Sendverificationcode:this.time}}
												</button>
											</div>
											<input type="checkbox" class="agree"><span class="agreetext">我已阅读并同意小米帐号 <a
													href="">用户协议</a> 和<a href="">
													隐私政策</a></span>
										</form>
										<button class="loginButton" @click="goRegister">注册</button>
										<span class="Fail">收不到验证码？</span>
										<div class="forget">
											<span>忘记密码</span>
											<span>使用手机号登录</span>
										</div>
									</div>
								</div>
								<div class="other">
									<div class="OtherWays">其他方式登录</div>
									<div class="allotherIcon">
										<span class="otherIcon qq"></span>
										<span class="otherIcon wechat"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>
		</div>
		<script>
			const app = Vue.createApp({
				data() {
					return {
						Idinput: false,
						Verifiedbymobilephone: false,
						islogin: true,
						account: '',
						password: "",
						area: "zh",
						Sendverificationcode: "发送验证码",
						phone: "",
						VerificationCode: '',
						time: null,
						countries: [{
								name: '中国',
								value: "zh"
							},
							{
								name: '外国',
								value: "me"
							},
						]
					}
				},
				methods: {
					login() {
						this.islogin = true
					},
					register() {
						this.islogin = false
					},
					goLogin() {
						if (this.account === '' || this.password == '') {
							this.Idinput = true
							return
						}
						console.log('账号' + this.account, "密码" + this.password)
					},
					sendCode() {
						this.$refs.btn.disabled = true;
						this.time = 60
						setInterval(() => {
							if (this.time <= 0) {
								this.$refs.btn.disabled = false;
								return
							} else {
								this.time--
							}
						}, 1000);
					},
					goRegister() {
						if (this.phone === '' || this.VerificationCode === '') {} else {
							console.log('国家' + this.area, '号码' + this.phone, '验证码' + this.VerificationCode)
						}
					},
					blur() {
						let phoneValue = this.$refs.phoneRef.value
						const judgment = /^(?:(?:\+|00)86)?1\d{10}$/
						this.Verifiedbymobilephone = !judgment.test(phoneValue)
					},
				},
			})
			app.mount("#app")
		</script>
	</body>

</html>